<template>
	<b-submit-page
		bottomExtraClass="bg-color-1 bottom-shadow"
		bottomPdClass="p-2-2"
		:submitText="
			actDetail.allowJoinTimes === 0 ? '人数已达上限, 无法' + actTypeDetail.actionText : actTypeDetail.actionText
		"
		:disabled="actDetail.allowJoinTimes === 0"
	>
		<view class="px-3-1 pb-3-1 row-center">
			<view class="mr-3-1">
				<image :src="actTypeDetail.imgSrc" style="width: 200rpx; height: 200rpx"></image>
			</view>
			<text class="block text-xxl" style="color: #d7236d">
				{{ actDetail.activityDetailName }}
			</text>
		</view>
		<view class="text-center mb-2-2">
			<text class="color-main text-xxl"
				>已有{{ actDetail.joinNum || 0 }}人参与，剩余{{ actDetail.putNum - (actDetail.joinNum || 0) || 0 }}份</text
			>
		</view>
		<view class="row-center content-center mb-3-1">
			<view class="h-min bg-active" style="width: 160rpx"></view>
			<view class="mx-2">
				<text class="color-main text-l">{{ actTypeDetail.getAmountText(actDetail) }}</text>
			</view>
			<view class="h-min bg-active" style="width: 160rpx"></view>
		</view>
		<view class="text-center row-center content-center">
			<text class="color-main text-l">{{ actTypeDetail.canText }}</text>
			<view class="rounded-full mx-2-2 flex-center p-1-1 text-center" style="height: 40rpx;min-width: 40rpx; background-color: #009dff">
				<text class="color-white text-l">{{ handleTempalteValue(actDetail.allowJoinTimes) }}</text>
			</view>
			<text class="color-main text-l">份</text>
		</view>
		<view class="mx-2-2 py-2-2 border-b" style="borer-color: #373737; border-bottom-style: dashed">
			<text class="text-m block mb-1" style="color: #545556">活动期限：</text>
			<text class="text-m color-main block">{{ dateText }}</text>
		</view>
		<view class="mx-2-2 py-2-2 border-b" style="borer-color: #373737; border-bottom-style: dashed">
			<text class="text-m block mb-1" style="color: #545556">活动时间：</text>
			<text class="text-m color-main block">{{ timeText }}</text>
		</view>
		<view class="mx-2-2 py-2-2 border-b" style="borer-color: #373737; border-bottom-style: dashed">
			<text class="text-m block mb-1" style="color: #545556">活动内容：</text>
			<rich-text
				v-if="actDetail.description"
				class="csc-rich-text"
				:nodes="handleImgRichText(actDetail.description)"
			></rich-text>
			<c-empty v-else></c-empty>
		</view>
		<view class="py-2-2 border-b" style="borer-color: #373737; border-bottom-style: dashed">
			<text class="text-m block mb-1 mx-2-2 mb-2-2" style="color: #545556">活动载体：</text>
			<view v-if="actDetail.activityCarrier === ActCarrier.product">
				<ProductDetailMain :detail="productData" />
			</view>
			<view v-else>
				<CouponDetail :data="actDetail.coupons || {}"/>
			</view>
		</view>
	</b-submit-page>
</template>

<script>
import { getActDetail } from '@/base/api/activity.js';
import { ActType, ActTypeDetail, ActCarrier, ObtainWays } from '@/base/common-data.js';
import { ref, computed } from 'vue';
import dateUtil from '@/uni-sdk/utils/date.js';
import ProductDetailMain from '../product-detail/product-detail-main.vue';
import { getGoodDetail } from '@/base/api/goods.js';
import { handleImgRichText } from '@/base/common-business.js';
import { handleTempalteValue } from '@/uni-sdk/utils/common.js';
import CouponDetail from "./coupon-detail.vue";

export default {
	components: {
		ProductDetailMain,
		CouponDetail,
	},
	onLoad(options) {
		this.actId = options.id;
		this.loadData();
	},
	onPullDownRefresh() {
		this.loadData();
	},
	setup() {
		const actId = ref();
		const actDetail = ref({});
		const loading = ref(false);
		async function loadData() {
			if (!actId.value) return;
			loading.value = true;
			const data = await getActDetail(actId.value);
			loading.value = false;
			uni.stopPullDownRefresh();
			if (data) {
				actDetail.value = data;
				if (data.activityCarrier === ActCarrier.product) {
					loadProductData(data.goodsId);
				}
			}
		}

		const actTypeDetail = computed(() => {
			let target = ActTypeDetail[actDetail.value.activityType];
			if (!target) {
				target = {
					imgSrc: '/static/default-square.png',
					getAmountText(data) {
						return '--';
					},
					canText: '您当前还可购买',
				};
			}
			return target;
		});

		const dateText = computed(() => {
			if (actDetail.value.isPermanently) return '长期';
			const startPeriod = actDetail.value.startPeriod;
			const endPeriod = actDetail.value.endPeriod;
			if (!startPeriod || !endPeriod) {
				return '--';
			}
			return `${dateUtil.format(startPeriod, 'yyyy-MM-dd')} ~ ${dateUtil.format(endPeriod, 'yyyy-MM-dd')}`;
		});

		const timeText = computed(() => {
			if (actDetail.value.isAllDay) return '全天';
			if (!actDetail.value.startTime) return '--';
			return `${actDetail.value.startTime} ~ ${actDetail.value.endTime}`;
		});

		const productData = ref({});
		async function loadProductData(id) {
			const data = await getGoodDetail(id);
			if (data) {
				productData.value = data;
			}
		}

		// const canNum = computed(() => {
		// const min = Math.min(props.data.allowJoinTimes, props.data.obtainLimitNum);
		// min - 自己当前买的份数 = 还可购买的数量
		// });
		return {
			loadData,
			actId,
			actDetail,
			loading,
			actTypeDetail,
			dateText,
			timeText,
			ActCarrier,
			productData,
			handleImgRichText,
			handleTempalteValue,
		};
	},
};
</script>

<style>
</style>
